<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>校园网流量账号申请系统</title>

	<!-- Bootstrap -->
	<link href="/static/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="/static/com.css" />
	<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
	<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
	<!--[if lt IE 9]>
      <script src="/static/html5shiv/html5shiv.min.js"></script>
	  <script src="/static/respond/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index">校园网流量账号申请系统</a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="index"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;&nbsp;首
                            页
                        </a></li>
                    <li class="active"><a href="apply"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;&nbsp;我要申请</a></li>
                    <li><a href="apply/record"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>&nbsp;&nbsp;申请记录</a></li>
                    <li><a href="help"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>&nbsp;&nbsp;帮
                            助
                        </a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>&nbsp;&nbsp;关于我们</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    {if ($flag) }
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span>{$userInfo.username}</a></li>
                    <li><a href="logout/user"><span class="glyphicon glyphicon-log-out"></span> 退出</a></li>
                    {else /}
                    <li><a href="login"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
                    {/if}
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <h3 class="text-center text-info">
            请填写个人信息
        </h3>
        <div class="row ">
            <form method="post" action="#" id="applyForm">
                <div class="col-md-4 column">
                    <div class="form-group">
                        <label>姓名</label>
                        <input type="text" class="form-control" id="realname" aria-describedby="helpBlock1" value="{$userInfo.username}" disabled/>
                    </div>
                    <div class="form-group">
                        <label>一卡通账号</label>
                        <input type="text" class="form-control" id="username" aria-describedby="helpBlock2" value="{$userInfo.real_name}" disabled/>
                    </div>
                </div>
                <div class="col-md-4 column">
                    <div class="form-group">
                        <label>手机号</label>
                        <input type="text" class="form-control" id="tel" aria-describedby="helpBlock3" value="{$userInfo.tel}" class="required"/>
                    </div>
                    <div class="form-group">
                        <label>邮箱</label>
                        <input type="email" class="form-control" id="email" aria-describedby="helpBlock4" value="{$userInfo.email}" class="required"/>
                    </div>
                </div>
                <div class="col-md-4 column">
                    <div class="form-group">
                        <label>所属部门</label>
                        <input type="text" class="form-control" id="department" aria-describedby="helpBlock5" value="{$userInfo.department}" placeholder="例如：生物科学技术学院" class="required" class="required"/>
                    </div>
                    <div class="form-group">
                        <label>申请时长</label>
                        <select class="form-control" id="duration">
                            <option value = "1">1个月</option>
                            <option value = "2">2个月</option>
                            <option value = "3">3个月</option>
                        </select>
                    </div>
                    <div class="checkbox">
                        <label><input type="checkbox" id="check1" aria-describedby="helpBlock6" checked="true"/>我同意<a href="help">《沈阳农业大学校园网使用规范》</a></label>
                    </div>
                    <div class="form-group">
                        <button type="button" id="apply" class="btn btn-info btn-block">申&nbsp;&nbsp;&nbsp;&nbsp;请</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <h4>
                提示!
            </h4> 申请的账号在<strong>3-5</strong>个工作日通过审核。<a href="help.html" target="_blank" class="alert-link">详情</a>请阅读帮助页面
        </div>
    </div>
    <div class="container">
        <p class="text-muted">友情链接</p>
        <ul class="list-inline">
            <li><a href="http://snic.syau.edu.cn">大学生网络信息中心</a></li>
            <li><a href="http://www.syau.edu.cn">学校首页</a></li>
            <li><a href="http://vod.syau.edu.cn">vod点播网</a></li>
            <li>银杏PT</li>
            <li>大学生网络信息中心</li>
            <li>学校首页</li>
            <li>vod点播网</li>
            <li>银杏PT</li>
        </ul>
    </div>
    <footer class="footer">
        <div class="container">
            <p class="text-muted text-center p-line-height">Copyright © 2019 大学生网络信息中心. All Rights Reserved </p>
        </div>
    </footer>
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="/static/jquery/jquery.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/static/bootstrap/bootstrap.min.js"></script>
    <script>
        //页面加载的时候执行的方法ready（），和load方法一样
        $(document).ready(function () {
            //为表单的必填文本框添加相关事件（blur、focus、keyup）
            //对于每个选择出来的标签调用blur都个他们绑定一个……
            $("form :input").blur(function () {
                //注意：这里的this是DOM对象，$(this)才是jQuery对象
                var $parent = $(this).parent();
                //删除之前的错误提醒信息
                //console.log($parent)
                $parent.find(".help-block").remove()
                $parent.removeClass("has-error");
                //验证手机号
                if ($(this).is("#tel")) {
                    //运用jQuery中的$.trim()方法，去掉首位空格
                    if ($.trim(this.value) == "" || $.trim(this.value).length != 11) {
                        var errorMsg = " 请输入11位手机号码！";
                        $parent.append("<span id='helpBlock3' class='help-block'>" + errorMsg + "</span>");
                        $parent.addClass("has-error");
                    }
                }
                //验证邮箱
                if ($(this).is("#email")) {
                    var emailVal = $.trim(this.value);
                    var regEmail = /.+@.+\.[a-zA-Z]{2,4}$/;
                    if (emailVal == "" || (emailVal != "" && !regEmail.test(emailVal))) {
                        var errorMsg = " 请输入正确的E-Mail住址！";
                        $parent.append("<span id='helpBlock4' class='help-block'>" + errorMsg + "</span>");
                        $parent.addClass("has-error");
                    }
                }
                //验证部门
                if ($(this).is("#department")) {
                    if ($.trim(this.value) == "" || $.trim(this.value).length < 3) {
                        var errorMsg = "部门名称不能为空！";
                        $parent.append("<span id='helpBlock5' class='help-block'>" + errorMsg + "</span>");
                        $parent.addClass("has-error");
                    }
                }
            }).keyup(function () {
                //triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
                $(this).triggerHandler("blur");
            }).focus(function () {
                $(this).triggerHandler("blur");
            });
            $("#apply").bind("click", apply);
            function apply() {
                var $btn = $(this).button('loading')
                let arr = {
                    "tel": $("#tel").val(),
                    "email": $("#email").val(),
                    "department": $("#department").val(),
                    "duration": $("#duration").val()
                }
                $.post("/index.php/apply/add", arr, function (res) {
                    console.log(res)
                    if (res.code == 200) {
                        alert(res.msg);
                        window.location.assign("/index.php/apply/record")
                    } else if (res.code != 200) {
                        alert(res.msg);
                    }
                    $btn.button('reset')
                }, "json").fail(function (res) {
                    console.log(res)
                    alert("网络异常，请重试！");
                    $btn.button('reset')
                })
            }
        });
    </script>
</body>

</html>